<script src="../../.postcssrc.js"></script>
<template>
  <div id="app">
    <ul>
      <li
        v-for="(item,index) in tabs"
        :class="{active:index == num}"
        @click="tab(index)">{{item}}</li>
    </ul>
    <div class="tabCon">
      <div
        v-for='(itemCon,index) in tabContents'
        v-show=" index == num">{{itemCon}}</div>
    </div>
  </div>


</template>

<script>
    export default {
        name: "header",
      data(){
          return{
            arr:["snds","java","ios"],
            tabs: ["标题一", "标题二","标题三"],
            tabContents: [],
            num: 1
          }
      },
      methods: {
        tab(index) {
          this.num = index;
          this.tabContents[index]=index;
        }
      }
    }
</script>

<style scoped>

  ul{
    position: fixed;
    top:0;
    width: 100%;
    list-style-type: none;
  }
 ul li{
   float: left;
   color: rosybrown;
   width: 30%;
   list-style-type: none;
 }
</style>
